<template>
  <div class="container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="线索分析" name="first">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="渠道来源">
            <el-select v-model="value" placeholder="渠道来源" size="small" style="width: 240px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="线索状态">
            <el-select v-model="formInline.region" placeholder="线索状态" size="small" style="width: 240px">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="formInline.date" type="daterange" unlink-panels range-separator="-"
              start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" size="small" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" size="small">搜索</el-button>
            <el-button :icon="RefreshRight" size="small" @click="chongzhi">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- echarts图表 -->
        <div ref="echartsRef" style="height: 400px; width: 100%"></div>
        <el-table :header-cell-style="{ 'background-color': '#f8f8f9' }" :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="时间" width="180" />
          <el-table-column prop="name" label="线索增量" width="180" />
          <el-table-column prop="name2" label="线索存量" width />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="商机分析" name="second">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="创建时间">
            <el-date-picker v-model="formInline.date" type="daterange" unlink-panels range-separator="-"
              start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" size="small" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" size="small">搜索</el-button>
            <el-button :icon="RefreshRight" size="small" @click="chongzhi">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- echarts图表 -->
        <div ref="echartsRef2" style="height: 400px; width: 100%"></div>
        <el-table :header-cell-style="{ 'background-color': '#f8f8f9' }" :data="tableData2" style="width: 100%">
          <el-table-column prop="date" label="时间" width="180" />
          <el-table-column prop="name" label="商机增量" width="180" />
          <el-table-column prop="name2" label="商机存量" width />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="活动分析" name="third">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="创建时间">
            <el-date-picker v-model="formInline.date" type="daterange" unlink-panels range-separator="-"
              start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" size="small" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" size="small">搜索</el-button>
            <el-button :icon="RefreshRight" size="small" @click="chongzhi">重置</el-button>
          </el-form-item>
        </el-form>
        <div ref="echartsRef3" style="height: 400px; width: 100%"></div>
        <div ref="echartsRef4" style="height: 400px; width: 100%"></div>
        <el-table :header-cell-style="{ 'background-color': '#f8f8f9' }" :data="tableData3" style="width: 100%">
          <el-table-column prop="name" label="活动名称" width="180" />
          <el-table-column prop="count" label="线索数量" width="180" />
          <el-table-column prop="available" label="线索有效率" width />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="渠道分析" name="fourth">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="创建时间">
            <el-date-picker v-model="formInline.date" type="daterange" unlink-panels range-separator="-"
              start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" size="small" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" size="small">搜索</el-button>
            <el-button :icon="RefreshRight" size="small" @click="chongzhi">重置</el-button>
          </el-form-item>
        </el-form>
        <div ref="echartsRef5" style="height: 400px; width: 100%"></div>
        <div ref="echartsRef6" style="height: 400px; width: 100%"></div>
        <el-table :header-cell-style="{ 'background-color': '#f8f8f9' }" :data="tableData4" style="width: 100%">
          <el-table-column prop="name" label="渠道名称" width="180" />
          <el-table-column prop="count" label="线索数量" width="180" />
          <el-table-column prop="available" label="线索有效率" width />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { Search, RefreshRight } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
import echarts from "../../../utils/echarts"
import {
  listMenuClue,
  listMenuClueList,
  listMenuCluestatusList,
  listMenuBusiness,
  listMenuActivity,
  listMenuChannel,
} from "../../../api/tienchin/analysis.ts";
import { number } from 'echarts/core';

let formInline = ref({
  user: '',
  region: '',
  date: '',
})
const queryInfo = ref({
  pageNum: 1,
  pageSize: 10,
});
const activeName = ref('third')
const input1 = ref('')
const value = ref('')
const value1 = ref('')
const value2 = ref<[Date, Date]>([
  new Date(''),
  new Date(''),
])
const value3 = ref<[Date, Date]>([
  new Date(''),
  new Date(''),
])
const value4 = ref<[Date, Date]>([
  new Date(''),
  new Date(''),
])
let options = ref([])
let options2 = ref([])
let tableData = ref([])
let tableData2 = ref([])
let tableData3 = ref([])
let tableData4 = ref([])
const echartsRef = ref()
const echartsRef2 = ref()
const echartsRef3 = ref()
const echartsRef4 = ref()
const echartsRef5 = ref()
const echartsRef6 = ref()
// 指定图表的配置项和数据
const option = {
  title: {
    text: '线索分析',
    left: "center"
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['增量数据', '存量数据'],
    bottom: "bottom",
    left: "left",
    itemHeight: 12
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '增量数据',
      type: 'line',
      stack: 'Total',
      data: [],
      lineStyle: {
        color: 'orange'
      },
      itemStyle: {
        color: 'orange'
      }
    },
    {
      name: '存量数据',
      type: 'line',
      stack: 'Total',
      data: [],
      lineStyle: {
        color: 'skyblue'
      },
      itemStyle: {
        color: 'skyblue'
      }
    },
  ]
}
const option2 = {
  title: {
    text: '商机分析',
    left: "center"
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['增量数据', '存量数据'],
    bottom: "bottom",
    left: "left",
    itemHeight: 12
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '增量数据',
      type: 'line',
      stack: 'Total',
      data: [],
      lineStyle: {
        color: 'orange'
      },
      itemStyle: {
        color: 'orange'
      }
    },
    {
      name: '存量数据',
      type: 'line',
      stack: 'Total',
      data: [],
      lineStyle: {
        color: 'skyblue'
      },
      itemStyle: {
        color: 'skyblue'
      }
    },
  ]
}

let option3 = {
  title: {
    text: '活动总数分析',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '活动分析',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
let option4 = {
  title: {
    text: '活动有效率分析',
    left: "center"
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['活动有效率'],
    bottom: "bottom",
    left: "center",
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '活动有效率',
      type: 'line',
      stack: 'Total',
      data: [],
      lineStyle: {
        color: 'skyblue'
      },
      itemStyle: {
        color: 'skyblue'
      }
    }
  ]
}
let option5 = {
  title: {
    text: '渠道总数分析',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '活动分析',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
let option6 = {
  title: {
    text: '渠道有效率分析',
    left: "center"
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['渠道线索有效率'],
    bottom: "bottom",
    left: "left",
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '活动有效率',
      type: 'line',
      stack: 'Total',
      data: [],
      lineStyle: {
        color: 'skyblue'
      },
      itemStyle: {
        color: 'skyblue'
      }
    }
  ]
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const shortcuts = [

  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
const selectoneshow = () => {
  listMenuClueList().then((res) => {
    console.log(res)
    res.data.forEach(element => {
      let object = { value: '', label: '' }
      object.value = element.channelId
      object.label = element.channelName
      options.value.push(object)
    });
  })
}
const selectoneshow2 = () => {
  listMenuCluestatusList().then((res) => {
    console.log(res)
    res.data.forEach(element => {
      let object = { value: '', label: '' }
      object.value = element.dictValue
      object.label = element.dictLabel
      options2.value.push(object)
    });
  })
}
const getlistMenuClueList = () => {
  listMenuClue().then((res) => {
    console.log(res)
    tableData.value = res.total
  })
}
const getlistMenuBusiness = () => {
  listMenuBusiness().then((res) => {
    console.log(res)
    tableData2.value = res.total
  })
}
const getlistMenuActivityList = () => {
  listMenuActivity().then((res) => {
    console.log(res)
    res.data.forEach(item => {
      let object = { value: number, name: null }
      object.value = item.count
      object.name = item.name
      option3.series[0].data.push(object)
      option4.xAxis.data.push(item.name)
      option4.series[0].data.push(item.available)
    })
    tableData3.value = res.data
    console.log(option3.series[0].data)
    const myChart3 = echarts.init(echartsRef3.value)
    const myChart4 = echarts.init(echartsRef4.value)
    myChart3.setOption(option3)
    myChart4.setOption(option4)
  })
}
const getlistMenuChannel = () => {
  listMenuChannel().then((res) => {
    console.log(res)
    res.data.forEach(item => {
      let object = { value: number, name: null }
      object.value = item.count
      object.name = item.name
      option5.series[0].data.push(object)
      option6.xAxis.data.push(item.name)
      option6.series[0].data.push(item.available)
    })
    tableData4.value = res.data
    const myChart5 = echarts.init(echartsRef5.value)
    myChart5.setOption(option5)
    const myChart6 = echarts.init(echartsRef6.value)
    myChart6.setOption(option6)
  })
}
const chongzhi = () => {
  formInline.resetFields()
}



onMounted(() => {
  selectoneshow()
  selectoneshow2()
  getlistMenuClueList()
  getlistMenuBusiness()
  getlistMenuActivityList()
  getlistMenuChannel()
  const myChart = echarts.init(echartsRef.value)
  const myChart2 = echarts.init(echartsRef2.value)

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
  myChart2.setOption(option2)
})
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.container {
  padding: 20px;

  .header {
    display: flex;
    padding: 20px;

    .one {
      margin-right: 20px;
    }

    span {
      font-weight: bold;
      margin-right: 10px;
    }
  }
}

.echarts {
  margin: auto;
  border-radius: 8px;
  margin-top: 20px;
  width: 97%;
  background-color: white;
  height: 300px;

  #echarts_con {
    width: 100%;
    height: 100%;
  }
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
